

  <title>代码修饰</title>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>代码修饰</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">默认修饰</div>
          <div class="layui-card-body">
            <pre class="layui-code">// 在里面放置任意的文本内容
test
test
            </pre>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">深色模式</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{title: 'Custom Title', skin: 'dark'}">// 在里面放置任意的文本内容
test
test
            </pre>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">叠加使用</div>
          <div class="layui-card-body">
            <pre class="layui-code">// 在里面放置任意的文本内容
test
test
test
      <pre class="layui-code">// 在里面放置任意的文本内容
test
test
test
      <pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
test
test
test
            </pre>
            </pre>
            </pre>
      
            <pre class="layui-code" lay-options="{skin: 'dark'}">// 在里面放置任意的文本内容
test
test
test
      <pre class="layui-code" lay-options="{skin: 'dark'}">// 在里面放置任意的文本内容
test
test
test
<pre class="layui-code" lay-options="{skin: 'dark', ln: false}">// 不显示行号（注：v2.7.3 新增）
test
test
test
            </pre>
            </pre>
            </pre>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">固定高度</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{height: '150px'}">// 在里面放置任意的文本内容
test
test
test
code line
code line
code line
code line
code line
            </pre> 
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">不显示行号</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{ln: false}">// 不显示行号（注：v2.7.3 新增）
test
test
            </pre>
          </div>
        </div>
        
        <div class="layui-card">
          <div class="layui-card-header">自定义右上角内容</div>
          <div class="layui-card-body">
            <pre class="layui-code" lay-options="{about: 'code'}">// 在里面放置任意的文本内容
test
test
            </pre>
            <div id="custom1">
自定义右上角内容，以便实现个性化操作
此处仅为演示，右上角实际功能需自主完成
😄
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
  
  <script>
  layui.use('code', function(){
    // 执行渲染
    layui.code({
      elem: 'pre'
    });
    
    // custom more about
    layui.code({
      elem: '#custom1',
      about: [
        '<a href="javascript:;">复制</a>',
        '<a href="about:blank" target="_blank">跳转</a>'
      ].join('')
    });
  });
  </script>